<template>
  <div class="demo">
    <Loading v-if="!tagList.length"></Loading>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/demo/list' }"
        >Demo管理</el-breadcrumb-item
      >
      <el-breadcrumb-item>{{ id ? "编辑" : "新建" }}Demo</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="container">
      <el-form label-width="80px" :model="demo">
        <el-form-item label="标题">
          <el-input v-model="demo.title"> </el-input>
        </el-form-item>
        <el-form-item label="标签">
          <el-select v-model="demo.tags" multiple placeholder="请选择标签">
            <el-option
              v-for="item in tagList"
              :key="item._id"
              :label="item.name"
              :value="item._id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="链接">
          <el-input v-model="demo.url"> </el-input>
        </el-form-item>
        <el-form-item label="封面图片">
          <el-upload
            class="img-upload"
            drag
            :action="baseURL + '/upload'"
            :on-success="afterImgUpoad"
          >
            <img :src="demo.coverImg" v-if="demo.coverImg" />
            <span v-else>点击上传封面图</span>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="save" class="mt10">保存</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { reactive, toRefs, onBeforeMount } from "vue";
import { useRouter } from "vue-router";
import { baseURL, putData, getData, postData } from "../../services/http";
export default {
  name: "articleEdit",
  props: { id: {} },
  setup(props) {
    const router = useRouter();
    const state = reactive({
      demo: {},
      tagList: [],
    });
    const stateAsRefs = toRefs(state);
    const getTagList = async () => {
      const { data: res } = await getData("rest/tag");
      state.tagList = res.data;
    };
    const getDemoDetail = async () => {
      const res = await getData(`rest/demo/${props.id}`);
      state.demo = res.data;
    };
    const save = async () => {
      if (props.id) {
        await putData(`rest/demo/${props.id}`, state.demo, "修改Demo成功");
      } else {
        await postData("rest/demo", state.demo, "创建Demo成功");
      }
      router.push("/demo/list");
    };
    onBeforeMount(() => {
      props.id && getDemoDetail();
      getTagList();
    });
    const afterImgUpoad = (res) => {
      state.demo.coverImg = res.url;
    };
    return {
      ...stateAsRefs,
      save,
      baseURL,
      afterImgUpoad,
    };
  },
};
</script>

<style lang="scss">
.demo-upload {
  width: 200px;
  //height: 200px;
  .el-upload {
    height: auto;
  }
}
.demo {
  width: 50%;
  .el-upload {
    height: auto;
  }
  .el-upload-dragger {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .file-name {
    font-size: 20px;
  }
}
</style>
